import { defineConfig, loadEnv, UserConfig, ConfigEnv } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
// 自动导入 ref，reactive,watch,computed 等API 无需手动引入
// import AutoImport from "unplugin-auto-import/vite";
// 自动导入 Element Plus 等三方库和指定目录下的自定义组件 无需手动引入
// import Components from "unplugin-vue-components/vite";
// import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import Icons from 'unplugin-icons/vite'
// import IconsResolver from "unplugin-icons/resolver";
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// 配置系统标题插件
import { createHtmlPlugin } from 'vite-plugin-html'
import legacy from '@vitejs/plugin-legacy'
import vueJsx from '@vitejs/plugin-vue-jsx'

// 开启gzip压缩
import viteComPression from 'vite-plugin-compression'

// 查看构建体积
import { visualizer } from 'rollup-plugin-visualizer'

// 获取 标题
const getViteEnv = (mode: string, target: string) => {
  return loadEnv(mode, process.cwd())[target]
}

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  const viteEnv = loadEnv(mode, process.cwd(), '')

  return {
    base: viteEnv.VITE_BASE_URL,
    // 服务配置
    server: {
      port: Number(viteEnv.VITE_APP_PORT) || 8888,
      // 是否开自动打开启浏览器
      open: viteEnv.VITE_OPEN_BROWSER ? true : false
      // 配置代理
      // proxy: viteEnv.VITE_BASE_URL_API
      //   ? {
      //       '^/api/.*': {
      //         target: viteEnv.VITE_BASE_URL_API,
      //         changeOrigin: true,
      //         rewrite: (path) => path.replace(/^\/api/, '')
      //       }
      //     }
      //   : {}
    },
    // 插件配置
    plugins: [
      vue(),
      // 配置系统标题插件
      //  https://juejin.cn/post/7223286759630225463
      createHtmlPlugin({
        inject: {
          data: {
            VITE_APP_TITLE: getViteEnv(mode, 'VITE_APP_TITLE')
          }
        }
      }),
      vueJsx(), //插件使用
      // 开启使用 gzip 压缩
      viteComPression({
        ext: '.gz',
        deleteOriginFile: false
      }),
      visualizer({ open: true }),
      Icons({
        // 自动安装图标库
        autoInstall: true
      }),
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹 --- 指定 存储 svg 的地址路径
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]'
      }),
      // 兼容性
      legacy({
        targets: ['defaults', 'not IE 11']
      })
      // AutoImport({
      //   // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      //   imports: ["vue"],
      //   resolvers: [
      //     ElementPlusResolver(), // 自动导入图标组件
      //     IconsResolver({}),
      //   ],
      //   dts: path.resolve(
      //     path.resolve(__dirname, "src"),
      //     "types",
      //     "auto-imports.d.ts"
      //   ), // 指定自动导入函数TS类型声明文件路径
      // }),
      // 指定自动导入组件TS类型声明文件路径
      // Components({
      //   resolvers: [
      //     ElementPlusResolver(), // 自动注册图标组件
      //     IconsResolver({
      //       enabledCollections: ["ep"], // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
      //     }),
      //   ],
      //   // dts: path.resolve(
      //   //   path.resolve(__dirname, "src"),
      //   //   "types",
      //   //   "components.d.ts"
      //   // ), // 指定自动导入组件TS类型声明文件路径
      // }),
    ],
    // 路径配置
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '#': path.resolve(__dirname, 'typings')
      }
    },
    // 样式配置
    css: {
      // CSS 预处理器
      preprocessorOptions: {
        // 配置全局变量 -- > 即可在任何页面使用 variables.scss 里面定义好的变量
        // 要想 在 ts 中使用 该变量， 还需要 创建一个 variables.module.scss 结尾 文件， 然后导出 全局变量 :export {变量...}
        // https://juejin.cn/post/7228990409909108793#heading-9
        scss: {
          javascriptEnabled: true,
          // 表示 使用该文件下面的变量未全局变量
          additionalData: `@use "@/assets/styles/variables.scss" as *;`
        }
      }
    },
    // 打包配置
    build: {
      // 打包文件整理 例如 js css assets svg json ...文件分明 : rollupOptions
      rollupOptions: {
        // 在 Vite 中，build.rollupOptions.external 选项用于指定打包时应该将哪些模块作为外部模块处理。这意味着，打包过程中不会对这些外部模块进行打包，而是直接从外部加载。
        // https://juejin.cn/s/vite%20build.rollupoptions.external
        // external: ['qrcode'],
        // https://cn.rollupjs.org/configuration-options/#output-chunkfilenames
        output: {
          chunkFileNames: 'assets/js/[name]-[hash].js',
          entryFileNames: 'assets/js/[name]-[hash].js',
          assetFileNames: (assetInfo: any) => {
            if (
              assetInfo.type === 'assets' &&
              /\.(jpe?g|png|gif|svg|json)$/i.test(assetInfo.name)
            ) {
              return 'assets/img/[name].[hash][ext]'
            }
            if (
              assetInfo.type === 'assets' &&
              /\.(ttf|woff|woff2|eot)$/i.test(assetInfo.name)
            ) {
              return 'assets/fonts/[name].[hash][ext]'
            }
            return 'assets/[ext]/name-[hash].[ext]'
          }
        }
      },
      // https://cn.vitejs.dev/config/build-options.html#build-target
      // 规定触发警告的 chunk 大小。（以 kB 为单位）
      chunkSizeWarningLimit: 5 * 1024,
      // 必须开启：使用terserOptions才有效果
      minify: 'terser',
      terserOptions: {
        compress: {
          //生产环境时移除console / debugger
          // drop_console: true,
          drop_debugger: true
        },
        format: {
          comments: false // 删除注释
        }
      }
    }
  }
})
